<template>
  <el-card class="m-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold">用户管理</h2>
      <el-button type="primary" @click="openAddDialog">新增用户</el-button>
    </div>

    <el-table :data="users" border stripe class="w-full">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="image" label="头像">
        <template #default="{ row }">
          <el-avatar :size="50" :src="row.circleUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="name" label="昵称"></el-table-column>
      <el-table-column label="是否是主理人">
        <template #default="{ row }">
          <el-tag :type="row.compere ? 'success' : 'info'">
            {{ row.compere == 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="openEditDialog(row)">编辑</el-button>          
          <el-button size="small" type="danger" @click="deleteUser(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]" :size="size"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

    <!-- 编辑/新增对话框 -->
    <EditUser :type="type" v-model="show" :user="editingUser" @submit="handleSubmit" @refresh="userList" @close="show=false" />
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, defineComponent, getCurrentInstance } from 'vue'

import { ElMessage } from 'element-plus'
import EditUser from './comm/EditUser.vue'

const { proxy } = getCurrentInstance() as { proxy: any };
let type=ref<number>(0)

let page = ref<number>(1)
let size = ref<number>(10)
let total = ref<number>(0)

defineComponent({
  components: {
    EditUser
  }
})


// 用户数据
interface User {
  id?: number
  image: string
  phone: string
  name: string
  compere: number
  createTime: string
  updateTime: string
}

const users = ref<User[]>([])
const show = ref<boolean>(false)
const editingUser = ref<User>({
      id: 0,
      image: '',
      phone: '',
      name: '',
      compere: 0,
      createTime: "",
      updateTime: ""
})

onMounted(() => {
  getInit()
})

const getInit = (): void => {
  userList()
}



const handleCurrentChange = (e: number): void => {
  page.value = e
  userList()
}

const handleSizeChange = (e: number): void => {
  size.value = e
  userList()
}

// 获取用户列表
const userList = (): void => {

  proxy.api.user.list({ page: page.value, size: size.value }).then((rsp: any) => {
    users.value = rsp.data.list
    total.value = rsp.data.total
  })

}

// 打开新增对话框
const openAddDialog = () => {
  show.value = true
}

// 打开编辑对话框
const openEditDialog = (user: User) => {
  type.value=1
  editingUser.value = user
  show.value = true
}

// 提交新增或更新
const handleSubmit = async (user: User) => {
  if (user.id) {

    ElMessage.success('用户信息已更新')
  } else {

    ElMessage.success('用户已添加')
  }

  show.value = false
  // await loadUsers()
}

// 删除用户
const deleteUser = async (id: number) => {
  
  proxy.api.user.del(id).then((rsp: any) => {
    if(rsp.code==200){
      userList()
    }
  })
  // ElMessage.success('用户已删除')
  // await loadUsers()
}


</script>